<!-- 我的弹窗 -->

<template>
  <WebModal :word="GETTER.word" small>
    <WebForm>
      <FormInput :label="`${GETTER.category}名称`" bind="name" :max="10" required />

      <FormTreeMulti
        label="监测点"
        bind="monitorPointSiteId"
        :dict="treeDict"
        hasRight
        required
        @change="changePoint"
      />
    </WebForm>
  </WebModal>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import UTIL from './UTIL'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyModal',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [
    CORE.mixWeb(),
    CORE.mixTree('elec', 'elec_'),
    CORE.mixTree('water', 'water_'),
    CORE.mixTree('gas', 'gas_'),
  ],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 前缀
     */
    PRE() {
      const { param, DICT, elec_readyTree, water_readyTree, gas_readyTree } = this
      if (!elec_readyTree || !water_readyTree || !gas_readyTree) return ''
      return `${CORE.dict(DICT.TYPE, param.energyType, 2)}_`
    },

    /**
     * 结构树字典
     */
    treeDict() {
      const { PRE, DICT, param } = this
      if (!PRE) return []
      if (param.energyType !== 1) return this[`${PRE}treeDict`]
      return UTIL.transTreeDict(CORE.clone(this[`${PRE}treeDict`]), DICT.POINT)
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换监测点
     */
    changePoint(idList) {
      const { PRE, one, DICT } = this

      one.monitorDto = idList.map((id) => {
        const matched = this[`${PRE}treeMap`][id] || {}

        return {
          energyCategoryId: one.energyCategory,
          monitorPointSiteId: matched.id,
          monitorPointSiteName: matched.monitorPointName,
          monitorPointSiteType: matched.monitorPointType,
          monitorPointSiteTypeName: CORE.dict(DICT.POINT, matched.monitorPointType),
        }
      })
    },
  },
}
</script>
